<template>
  <div class="content-box mtop-20">
    <div class="daily-header">
      <div>
        <span class="font-24 font-weight">最近播放</span>
        <span class="font-14 mleft-10">共 {{ playLength }} 首</span>
      </div>
      <div class="clear pointer" @click="clearList">清除列表</div>
    </div>
    <!-- 操作按钮 -->
    <div class="describle-btns mtop-10">
      <a-button class="br-30 play-all" type="danger">
        <a-icon class="font-20" type="caret-right" />播放全部
      </a-button>
      <!-- <a-button class="mright-10 br-30 play-all">
        <a-icon class="font-20" type="folder-add" />收藏全部
      </a-button> -->
    </div>
    <div class="line mtop-20"></div>
    <MyList :columns="columns" :dataSource="dataSource" />
  </div>
</template>

<script>
// import { recommendSongs } from '@/api';
import MyList from '@/components/Detail/List';

export default {
  name: 'recentPlay',

  components: {
    MyList
  },

  data() {
    return {
      columns: [
        {
          title: '',
          dataIndex: 'index',
          key: 'index',
          width: 50,
          scopedSlots: { customRender: 'key' }
        },
        {
          title: '',
          dataIndex: 'operation',
          key: 'operation',
          width: 30,
          scopedSlots: { customRender: 'operation' }
        },
        {
          title: '音乐标题',
          dataIndex: 'name',
          key: 'name',
          ellipsis: true,
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '歌手',
          dataIndex: 'ar',
          key: 'ar',
          ellipsis: true,
          scopedSlots: { customRender: 'ar' }
        },
        {
          title: '专辑名',
          dataIndex: 'al',
          key: 'al',
          ellipsis: true,
          scopedSlots: { customRender: 'al' }
        },
        {
          title: '时长',
          dataIndex: 'duration',
          key: 'duration',
          ellipsis: true,
          width: 80,
          scopedSlots: { customRender: 'duration' }
        },
      ],
      dataSource: [],
      // isDisabled: false
    };
  },

  computed: {
    playLength() {
      return this.dataSource.length;
    }
  },

  created() {
    const recent = JSON.parse(localStorage.getItem('recentPlay'));
    if (recent && recent.length) {
      this.dataSource = recent;
    }
  },

  methods: {
    clearList() {
      if (this.dataSource && this.dataSource.length) {
        this.dataSource = [];
        localStorage.removeItem('recentPlay');
      }
    }
  },
};
</script>

<style lang="less" scoped>
.content-box {
  height: 98%;
  .daily-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .clear {
      color: #676767;
    }
  }
}
</style>